<template>
  <div>
    <!-- 获取焦点 DOM元素 .focus() -->
    <input  ref="inp" type="text" v-if="msg" placeholder="请输入关键字">
    <button @click="changeMsg" v-else>改msg</button>
  </div>
</template>

<script>
export default {
    data(){
      return {
        msg:false
      }
    },
    methods:{
      changeMsg() {
        // /isShow  修改，DOM更新是异步的，所以无法立即获取 需要用nextTick() 
        this.msg=true
        // 获取到inp后聚焦 
        this.$nextTick(()=>{
           this.$refs.inp.focus()
        });
       
      },
   

   
    
    }
};
</script>

<style >

</style>